<template>
  <div class="product-list-wrap">
    <div class="product-container">

      <PageTop firstMenu="订单管理" secondMenu="生产单列表" title="生产单列表" :showAddBtn="false"></PageTop>
      <div class="search-container">
        <el-select class="right-margin" clearable size="mini" v-model="status" placeholder="选择生产单状态">
          <el-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span class="description">选择下单日期段</span>
        <el-date-picker
          v-model="orderDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          value-format="yyyy-MM-dd">
        </el-date-picker>


        <div class="search-wrap">
          <span class="description">选择交货日期段</span>
          <el-date-picker
            v-model="payforDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-input size="mini" class="search" clearable v-model="keyword" placeholder="输入订单号/客户名称/商品名称关键字搜索"></el-input>
          <el-button plain size="mini" type="primary" @click="search">查询</el-button>
        </div>
      </div>
      <tableList :tableData="listData" @getData="getData"></tableList>

    <div class="page-wrap">
      <el-pagination 
      class="page-count" 
      @current-change="getData" 
      background layout="total, prev, pager, next" 
      :total="totalCount" 
      :current-page.sync='page' 
      :page-size="15"></el-pagination>
    </div>

    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import tableList from '@/tables/order/productListTable.vue';
import AjaxResquest from '@/api/apiRequest';
import PageTop from '@/components/pageTop.vue';

@Component({
  components: {
    tableList,
    PageTop
  }
})
export default class ProductList extends Vue {
  produceInRes!: AjaxResquest;
  listData: any[] = [];
  page: number = 1;
  pageSize: number = 15;
  totalCount: number = 0;

  statuses: any[] = [
    { label: '等待配料', value: '1' },
    { label: '开始生产', value: '2' },
    { label: '生产结束', value: '3' },
    { label: '已入库', value: '4' }
  ];
  keyword: string = '';
  status: string = '';
  orderDate: string = '';
  payforDate: string = '';
  $router!: any;

  ids!: any;
  mounted() {
    this.produceInRes = new AjaxResquest('/order/productionsList');
    if (this.$route.query.search) {
      this.ids = this.$route.query.id;
    }
    this.getData();
  }

  getData(): void {
    let data: any = {
      page: this.page,
      pageSize: this.pageSize,
      keyWord: this.keyword,
      status: this.status
    };

    if (this.orderDate) {
      data = {
        ...data,
        btime: this.orderDate[0],
        etime: this.orderDate[1]
      };
    }
    if (this.payforDate) {
      data = {
        ...data,
        orderBtime: this.payforDate[0],
        orderEtime: this.payforDate[1]
      };
    }
    if (this.ids) {
      this.$notify({
        title: '查询信息',
        message: '当前为搜索结果,点击查询按钮查看全部结果',
        position: 'top-left',
        duration: 0
      });
      data = { ...data, orderInfosId: this.ids };
    }
    this.produceInRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.listData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
  search() {
    this.ids = '';
    this.$router.replace({ path: this.$router.path });
    this.getData();
  }
}
</script>
<style lang="less">
.product-list-wrap {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow: auto;
  .page-count-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0;
    margin-bottom: 15px;
  }
  .search-container {
    text-align: left;
    margin-bottom: 15px;
  }
  .search-wrap {
    margin-top: 15px;
  }
  .search {
    margin-left: 15px;
    // margin-top: 15px;
    width: 250px;
    margin-right: 10px;
  }
  .description {
    font-size: 14px;
    margin-right: 10px;
    font-weight: 600;
  }
}
</style>
